<template>
  <div class="character-manager">
    <CharacterList
        :characters="characters"
        :selected-character="selectedCharacter"
        @select-character="selectCharacter"
        @create-character="createCharacter"
    />

    <CharacterInfo
        :character="selectedCharacter"
        @update-character="updateCharacter"
        @delete-character="deleteCharacter"
    />

    <SkinPreview
        :character="selectedCharacter"
        :selected-skin-index="selectedSkinIndex"
        :skin-library="skinLibrary"
    />

    <SkinLibrary
        :skin-library="skinLibrary"
        :selected-skin-index="selectedSkinIndex"
        :character="selectedCharacter"
        @select-skin="selectSkin"
        @save-skin="saveSkinChanges"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 导入组件
import CharacterList from './components/CharacterList.vue'
import CharacterInfo from './components/CharacterInfo.vue'
import SkinPreview from './components/SkinPreview.vue'
import SkinLibrary from './components/SkinLibrary.vue'

// 角色数据
const characters = ref([
  {
    id: 1,
    name: "Steve",
    shortName: "Steve",
    uuid: "6f5c53177c9c461dba5c0bf7df84028f",
    prefix: "&f[&aVIP&f]",
    group: "&a会员",
    createdAt: new Date('2023-01-15')
  },
  {
    id: 2,
    name: "Alex",
    shortName: "Alex",
    uuid: "853c80ef3c3749fdaa14938d48e9e9a4",
    prefix: "[战士]",
    group: "战士组",
    createdAt: new Date('2023-02-20')
  },
  {
    id: 3,
    name: "Enderman",
    shortName: "Enderman",
    uuid: "069a79f444e94726a5befca90e38aaf5",
    prefix: "[法师]",
    group: "法师组",
    createdAt: new Date('2023-03-10')
  }
])

// 皮肤库数据
const skinLibrary = ref([
  { name: "默认皮肤", uuid: "6f5c53177c9c461dba5c0bf7df84028f" },
  { name: "战士皮肤", uuid: "c6c8473dd1844f74bab28688eb0c4578" },
  { name: "法师皮肤", uuid: "069a79f444e94726a5befca90e38aaf5" },
  { name: "忍者皮肤", uuid: "f84acc1455bc4df58ecc99ad2731d67a" },
  { name: "海盗皮肤", uuid: "ee888fd9082049dea56b7dad6c18ee50" },
  { name: "机器人皮肤", uuid: "45266e44ca5e465d8846ed193bb68496" },
  { name: "圣诞皮肤", uuid: "a1c9c4a3c4e94a4f9e4c4a3c4e94a4f9" },
  { name: "万圣节皮肤", uuid: "b2d8e5f3c4e94a4f9e4c4a3c4e94a4f9" }
])

// 响应式数据
const selectedSkinIndex = ref(-1)
const selectedCharacter = ref(null)

// 选择角色
const selectCharacter = (character) => {
  selectedCharacter.value  = character
  selectedSkinIndex.value  = -1
}

// 创建角色
const createCharacter = (newCharData) => {
  const newChar = {
    id: characters.value.length  + 1,
    name: newCharData.name,
    shortName: newCharData.name.length  > 10
        ? newCharData.name.substring(0,  8) + "..."
        : newCharData.name,
    uuid: newCharData.uuid,
    prefix: "[新]",
    group: "默认组",
    createdAt: new Date()
  }

  characters.value.push(newChar)
  selectCharacter(newChar)
  ElMessage.success(' 角色创建成功')
}

// 更新角色信息
const updateCharacter = (updatedCharacter) => {
  const index = characters.value.findIndex(c  => c.id  === updatedCharacter.id)
  if (index !== -1) {
    characters.value[index]  = { ...updatedCharacter }
    ElMessage.success(' 角色信息已保存')
  }
}

// 删除角色
const deleteCharacter = (id) => {
  characters.value  = characters.value.filter(c  => c.id  !== id)
  if (selectedCharacter.value?.id  === id) {
    selectedCharacter.value  = null
  }
  ElMessage.success(' 角色已删除')
}

// 选择皮肤
const selectSkin = (index) => {
  selectedSkinIndex.value  = index
}

// 保存皮肤更改
const saveSkinChanges = (data) => {
  const index = characters.value.findIndex(c  => c.id  === data.characterId)
  if (index !== -1) {
    characters.value[index].uuid  = data.skinUuid
    ElMessage.success(' 皮肤已保存')
  }
}

onMounted(() => {
  if (characters.value.length  > 0) {
    selectCharacter(characters.value[0])
  }
})
</script>

<style scoped>
.character-manager {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .character-manager {
    flex-wrap: wrap;
    height: auto;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .character-manager {
    flex-direction: column;
  }
}
</style>